<template>
  <!-- 首页页面内容 -->
  <div class="inner">
    <article
      class="item episodes"
      :class="[{ first: index == 0 }, generateClassName(index)]"
      v-for="(item, index) in articleList"
      :key="index"
    >
      <div class="inner" v-if="index == 0">
        <div class="item-main">
          <h1>
            <span class="h1-ep">{{ item.idNo }} </span>
            <a class="processed" @click="clickReading(item.idNo)">{{
              item.title
            }}</a>
          </h1>

          <div class="item-desc text">
            <p>{{ item.minorText }}</p>
            <p><br /></p>
            {{ item.minorSecdText }}
            <a class="readmore" :title="'继续阅读「' + item.title + '」'">
              评论数<CommentNumber :postId="item.idNo"></CommentNumber>
            </a>
          </div>
        </div>
        <aside>
          <div class="aside-block aside-meta aside-tags">
            <div class="tags" style="display: block">
              <h5>内容主题</h5>
              <div v-for="(tg, tgIndex) in item.tags" :key="tgIndex">
                <a :title="'查看更多关于「' + tg + '」的内容'"
                  ><em>#</em>{{ tg }}</a
                >
              </div>
            </div>
          </div>
          <div class="aside-block aside-meta aside-duration">
            <h5>浏览时长</h5>
            {{ item.readingTime }}<span class="pg"> </span>分钟
          </div>
          <div class="aside-block aside-meta aside-date">
            <h5>发布时间</h5>
            {{ item.publishTime }}<span class="pg"> </span>
          </div>
          <div class="aside-block item-btns item-btns-primary">
            <a class="item-btn" :title="'立即阅览第' + item.idNo + '节目'">
              <svg viewBox="0 0 30 30"><path d="M19 15l-6.5 6V9z"></path></svg>
              <span @click="clickReading(item.idNo)">立即阅览</span>
            </a>
            <div class="play-tips mobile-hide"></div>
          </div>
        </aside>
      </div>
      <div class="inner" v-else>
        <div class="item-main">
          <h1>
            <span class="h1-ep">{{ item.idNo }} </span>
            <a class="processed" @click="clickReading(item.idNo)">{{
              item.title
            }}</a>
          </h1>
          <div class="item-meta">
            <span class="meta-tags" style="display: block">
              <span v-for="(tg, tgIndex) in item.tags" :key="tgIndex">
                <a :title="'查看更多关于「' + tg + '」的内容'"
                  ><em>#</em>{{ tg }}</a
                >
              </span>
            </span>
            <div class="meta-date">
              {{ item.publishMonth }}<span class="pg"> </span>月
              <span class="pg"> </span>
              {{ item.publishDay }}<span class="pg"> </span>日
            </div>
          </div>
          <div class="item-desc text">
            {{ item.minorText }}
            <a class="readmore" :title="'继续阅读「' + item.title + '」'">
              评论数<CommentNumber :postId="item.idNo"></CommentNumber>
            </a>
          </div>
        </div>
        <aside>
          <div class="item-btns">
            <a class="item-btn" :title="'立即阅览第' + item.idNo + '节目'">
              <svg viewBox="0 0 30 30"><path d="M19 15l-6.5 6V9z"></path></svg>
              <span @click="clickReading(item.idNo)">立即阅览</span>
            </a>
            <div class="play-tips mobile-hide"></div>
          </div>
        </aside>
      </div>
      <div class="admin-bar"></div>
    </article>
  </div>
</template>

<script src="./home_content.js"></script>

<style lang="less" scoped>
@import "./home_content.less";
</style>
